<!--  -->
<template>
  <div>
      <div class="footer">
          <ul>
              <li class="color">
                  <i class="iconfont">&#xe718;</i>
                  <span>首页</span>
              </li>
              <li>
                  <i class="iconfont">&#xe641;</i>
                  <span>首页</span>
              </li>
              <li>
                  <i class="iconfont">&#xe635;</i>
                  <span>首页</span>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
}

</script>
<style scoped lang="scss">
    .color{
        color: #fed101;
    }
    .footer{
        width: 100%;
        height: 55px;
        position: fixed;
        bottom: 0;
        z-index: 999;
        background: #fff;
        ul{
            width: 100%;
            display: flex;
            li{
                width: 33.3333%;
                height: 55px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                i{
                    font-size: 20px;
                    font-weight: 1000;  
                }
                span{
                    font-size: 14px;
                    margin-top: 0.26666rem;
                }
            }
        }
    }
</style>